<template>
	<view class="uni-container">
		<uni-forms ref="form" labelWidth="130px" v-model="formData" validateTrigger="bind">
			<uni-forms-item name="title" label="比赛名称" required>
				<uni-easyinput v-model="formData.title" :clearable="false" placeholder="请输入比赛名称" />
			</uni-forms-item>
			<uni-forms-item name="peopleNum" label="名额限制" required>
				<uni-easyinput type="number" v-model="formData.peopleNum" :clearable="false" placeholder="请输入限制人数" />
			</uni-forms-item>
			<uni-forms-item name="phone" label="官方电话">
				<uni-easyinput type="number" v-model="formData.phone" :clearable="false" placeholder="请输入官方电话" />
			</uni-forms-item>
			<uni-forms-item name="datetime" label="比赛开始时间" required>
				<uni-datetime-picker type="datetime" v-model="formData.create_time" @change="changeLog" />
			</uni-forms-item>
			<uni-forms-item name="end_time" label="比赛结束时间" required>
				<uni-datetime-picker type="datetime" v-model="formData.end_time" @change="changeEnd" />
			</uni-forms-item>
			<uni-forms-item name="address" label="比赛地点">
				<uni-data-picker :localdata="cityData.city" popup-title="请选择城市"
					@change="onCitychange"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item name="detailAddress" label="详细地址">
				<uni-easyinput v-model="formData.detailAddress" :clearable="false" placeholder="请输入详细地址" />
			</uni-forms-item>
			<uni-forms-item name="basicrate" label="基础费用">
				<uni-easyinput type="digit" v-model="formData.basicrate" :clearable="false" placeholder="请输入基础费用" />
			</uni-forms-item>
			<uni-forms-item name="datetime" label="其他赛事费用">
				<view v-for="(item,index) in selectList" style="display: flex;align-items: center;margin: 14rpx 0;">
					<view style="display: flex;align-items: center;">
						<view style="margin-right: 20rpx;">{{item.text}}</view>
						<uni-easyinput type="digit" v-model="item.price" :clearable="false" placeholder="请输入费用" />
					</view>
					<view style="margin-left: 30rpx;">
						<uni-icons type="trash" color="red" @click="deleted(index)" size="26"></uni-icons>
					</view>
					<view>
						<uni-data-checkbox :multiple="true" v-model="item.UTypeValue" :localdata="UtypeArr"
							@change="Utypechange"></uni-data-checkbox>
					</view>
				</view>
				<uni-data-select v-model="value" :localdata="otherRange" @change="changeSelect"></uni-data-select>
				<view style="font-size: 28rpx;color: #82848a;padding: 20rpx 0;">提示：选中即可添加赛事费用</view>
			</uni-forms-item>
			<uni-forms-item name="capRule" label="比赛规则" required>
				<webEdit v-model="formData.capRule" placeholder="请输入内容" ids="content"></webEdit>
			</uni-forms-item>
			<uni-forms-item name="photo" label="封面图">
				<div>
					<uni-file-picker limit="1" title="最多选择1张图片" @select="uploadImg"></uni-file-picker>
				</div>
			</uni-forms-item>

			<view class="uni-button-group">
				<button style="width: 100px;margin-right: 30rpx;" class="uni-button" @click="cancel">返回</button>
				<button style="width: 100px;background-color: #2979ff;color: #fff;" class="uni-button"
					@click="submit">发布</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import city from '@/utils/city.js'
	const db = uniCloud.database();
	export default {
		data() {
			return {
				showPassword: false,
				editorOption: {},
				selectList: [],
				value: 0,
				cityData: city,
				otherRange: [],
				UTypeValue: [],
				UtypeArr: [{
					"value": 0,
					"text": "U6"
				}, {
					"value": 1,
					"text": "U8"
				}, {
					"value": 2,
					"text": "U10"
				}, {
					"value": 3,
					"text": "U12"
				}],
				formData: {
					title: "",
					peopleNum: "",
					phone: "",
					datetime: "",
					end_time: "",
					create_time: "",
					capRule: "",
					basicrate: "",
					type: '',
					address: "",
					detailAddress: "",
					enrollment: 0
				},
			}
		},

		onLoad() {
			this.getOther()
		},

		methods: {
			getOther() {
				uniCloud.callFunction({
					name: 'typesadmin',
					data: {
						type: 'get'
					},
					success: res => {
						console.log('res==>', res)
						this.otherRange = res.result.data.map(item => {
							return {
								value: item._id,
								text: item.text,
								disabled: true
							}
						})
						console.log('this.otherRange', this.otherRange)
					}
				})
			},
			GetChange(e) {
				console.log('111', e)
			},
			// 添加其他费用
			addSelect() {

			},
			// 选择费用
			changeSelect(e) {
				console.log(e)
				let selectObj = this.otherRange.find(item => item.value == e)
				this.selectList.push(selectObj)
				this.otherRange.forEach(item => {
					this.selectList.forEach(items => {
						if (item.value == items.value) {
							item.disable = true
						}
					})
				})

				console.log(this.selectList)
			},
			// 选择组别
			Utypechange(e) {
				console.log(e)
			},
			// 删除选项
			deleted(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除此赛事费用？',
					success: res => {
						if (res.confirm) {
							let index = this.otherRange.findIndex(item => item.value == this.selectList[e]
								.value)
							this.otherRange[index].disable = false
							this.selectList.splice(e, 1)
						}
					}
				})
			},
			// 选择城市
			onCitychange(e) {
				console.log(e)
				let obj = e.detail.value
				this.formData.address = obj[0].text + obj[1].text + obj[2].text
			},
			// 选择图片
			uploadImg(e) {
				console.log(e)
				console.log(e)
				uni.showLoading({
					title: '上传中'
				})
				e.tempFilePaths.forEach(item => {
					uniCloud.uploadFile({
						filePath: item, //要上传的文件对象
						cloudPath: 'a.jpg', //保存在云端的文件名，这里以时间戳命名
						success: res => {
							console.log('tupian', res)
							this.formData.photo_url = res.fileID
							uni.hideLoading()
						},
						fail: Res => {
							uni.hideLoading()
							uni.showToast({
								title: '上传失败！',
								icon: 'none'
							})
							console.log('失败', Res)
						}
					})
				})
			},
			changeLog(e) {
				console.log(e)
				this.formData.create_time = e
			},
			changeEnd(e) {
				this.formData.end_time = e
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			/**
			 * 新增
			 * @param {Object} 
			 */
			submit() {
				console.log(this.formData)
				this.formData.otherArr = this.selectList
				if (this.formData.title == '') {
					uni.showToast({
						title: '请输入标题！',
						icon: 'none'
					})
					return
				} else if (this.formData.peopleNum == '') {
					uni.showToast({
						title: '请输入比赛人员数量！',
						icon: 'none'
					})
					return
				} else if (this.formData.create_time == '') {
					uni.showToast({
						title: '请选择开始时间！',
						icon: 'none'
					})
					return
				} else if (this.formData.end_time == '') {
					uni.showToast({
						title: '请选择结束时间！',
						icon: 'none'
					})
					return
				} else if (this.formData.capRule == '') {
					uni.showToast({
						title: '请输入比赛规则！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				this.formData.type = 'add'

				uniCloud.callFunction({
					name: 'compadmin',
					data: this.formData,
					success: res => {
						if (res.result.code == 200) {
							uni.hideLoading()
							uni.showToast({
								title: '发布成功！',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 500)
						}

					},
					fail: err => {
						uni.hideLoading()
						uni.showToast({
							title: '发布失败！',
							icon: 'none'
						})
					}
				})

			},
			// status 对应文字显示
			parseUserStatus(status) {
				if (status === 0) {
					return '启用'
				} else if (status === 1) {
					return '禁用'
				} else if (status === 2) {
					return '审核中'
				} else if (status === 3) {
					return '审核拒绝'
				} else {
					return '启用'
				}
			}
		}
	}
</script>

<style>
	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}

	.reset-password-btn {
		/* height: 100%; */
		line-height: 36px;
		color: #007AFF;
		text-decoration: underline;
		cursor: pointer;
	}

	.cancel-reset-password-btn {
		color: #007AFF;
		padding-right: 10px;
		cursor: pointer;
	}
</style>